<template>
  <div class="search">
    <Card>
      <Row class="operation padding-row">
        <Button @click="handleAdd" type="error">添加</Button>
        <Button @click="batchDel" type="error">删除</Button>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
        @on-selection-change="changeSelect"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import * as API_Pather from "@/api/pather.js";

export default {
  name: "pather",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
      },
      selectList: [], // 多选数据
      columns: [
        // 表头
        { type: "selection", width: 60, align: "center" },
        { title: "#", width: 60, align: "center", type: "index" },
        {
          title: "合作伙伴",
          tooltip: true,
          minWidth: 200,
          render: (h, params) => {
            return h("div", [
              h("img", {
                attrs: { src: params.row.partnerPic },
                style: {
                  width: "100px",
                  height: "80px",
                  margin: "10px",
                  verticalAlign: "middle",
                },
              }),
              h("span", {}, params.row.partnerName),
            ]);
          },
        },
        { title: "介绍", key: "partnerDesc", tooltip: true, minWidth: 300 },
        { title: "联系人", key: "partnerContact", minWidth: 120, tooltip: true },
        { title: "联系电话", key: "partnerPhone", minWidth: 180, tooltip: true },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            func.push(this.btnDom(h, "primary", "编辑", "handleEdit", params));
            func.push(this.btnDom(h, "error", "删除", "handleDel", params));
            func.push(this.btnDom(h, null, "查看", "handleView", params));
            return h(
              "div",
              { style: { display: "flex", justifyContent: "center" } },
              func
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  methods: {
    // 新增
    handleAdd() {
      this.$router.push({
        name: "pather-form",
        query: { id: null },
      });
    },
    // 编辑
    handleEdit(v) {
      this.$router.push({
        name: "pather-form",
        query: { id: v.id },
      });
    },
    // 查看
    handleView(v) {
      this.$router.push({
        name: "pather-detail",
        query: { id: v.id },
      });
    },
    //多选
    changeSelect(e) {
      this.selectList = e;
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row);
            },
          },
        },
        label
      );
    },
    // 批量删除
    batchDel() {
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>您确认要删除所选的" + this.selectList.length + "条合作伙伴吗？</p>",
        onOk: () => {
          let ids = this.selectList
            .map((i) => {
              return i.id;
            })
            .join(",");
          API_Pather.delPather(ids).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getData();
            }
          });
        },
      });
    },
    // 删除
    handleDel(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>您确认要删除此条合作伙伴吗？</p>",
        onOk: () => {
          API_Pather.delPather(v.id).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getData();
            }
          });
        },
      });
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 去除HTML标签
    replaceHTML(text) {
      let str = text;
      str = str.replace(/<p[^>]*>|<\/p>/gi, "");
      str = str.replace(/<span[^>]*>|<\/span>/gi, "");
      str = str.replace(/<strong[^>]*>|<\/strong>/gi, "");
      str = str.replace(/<blockquote[^>]*>|<\/blockquote>/gi, "");
      str = str.replace(/<table[^>]*>|<\/table>/gi, "");
      str = str.replace(/<tbody[^>]*>|<\/tbody>/gi, "");
      str = str.replace(/<tr[^>]*>|<\/tr>/gi, "");
      str = str.replace(/<th[^>]*>|<\/th>/gi, "");
      str = str.replace(/<td[^>]*>|<\/td>/gi, "");
      str = str.replace(/<div[^>]*>|<\/div[^>]*>/gi, "");
      str = str.replace(/<a[^>]*>|<\/a>/gi, "");
      str = str.replace(/<img[^>]*>|<\/img>/gi, "");
      str = str.replace(/<ul[^>]*>|<\/ul>/gi, "");
      str = str.replace(/<ol[^>]*>|<\/ol>/gi, "");
      str = str.replace(/<li[^>]*>|<\/li>/gi, "");
      str = str.replace(/&rdquo;|&ldquo;|&nbsp;|\n/gi, "");
      return str;
    },
    //查询资讯列表
    getData() {
      this.loading = true;
      API_Pather.getPatherPage(this.searchForm)
        .then((res) => {
          if (res.success) {
            let list = res.result.records;
            this.total = parseInt(res.result.total);
            list.forEach((i) => {
              i.partnerDesc = this.replaceHTML(i.partnerDesc);
            });
            this.data = list;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.modal-info {
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  .ivu-row {
    min-height: 60px;
    height: auto;
  }
  .box-border {
    min-height: 60px;
    width: 80%;
    height: auto;
  }
}
</style>
